<template>
    <div class="viewer">
        <template v-if="pdfPage.total > 1">
            <div class="previous-chapter-single-container" @click="handlePrePage">
                <span class="icon-dropdown previous-chapter-single"></span>
            </div>
            <div class="next-chapter-single-container" @click="handleNextPage">
                <span class="icon-dropdown next-chapter-single"></span>
            </div>
        </template>
        <div class="reader-setting-icon-container">
            <el-icon @click="handleZoomIn">
                <ZoomIn />
            </el-icon>
            <el-icon @click="handleZoomOut">
                <ZoomOut />
            </el-icon>
            <Icon class="toutiao-icon" name="toutiao" width="30" height="30" color="#2d4059" />
        </div>
        <div class="pdf-preview" v-loading="pdfPage.isLoading">
            <div class="pdf-wrap">
                <vue-pdf-embed ref="pdfRef" class="vue-pdf-embed" :style="scaleFun" :source="pdfPage.source"
                    :page="pdfPage.page" text-layer @loaded="handleDocumentLoaded"
                    @loading-failed="handleLoadingFailed"></vue-pdf-embed>
                <!-- source：文档来源（支持 string、object、Uint8Array 类型数据）
            page：要显示的页数（如果未指定，则显示所有页）
            textLayer：是否应启用文本图层（用于文本选中、复制） -->
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/icon.vue";
import { getQueryVariable } from "@/utils/tools";
import { getBookContent } from '@/utils/readUtil'
import { ElMessage } from "element-plus";
import VuePdfEmbed from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'
import '@/styles/readViewer/index.scss'
import { ZoomIn, ZoomOut } from "@element-plus/icons-vue";




const bookKey = getQueryVariable('bookKey');
let windowHeight = ref(0);
let windowWidth = ref(0);
const pdfRef = ref()
const scaleConstant = {
    minScale: 0.6, // 最小缩放比例
    maxScale: 2.0, // 最大缩放比例
    scaleStep: 0.1, // 每次缩放步长
}
let pdfPage = reactive({
    isLoading: true,
    total: 0,
    scale: 1,
    source: '',
    page: 1,
})


const loadBookContent = (bookKey: string) => {
    bookKey && getBookContent(bookKey).then((res) => {
        pdfPage.source = (res as Base64URLString)

    }).catch(error => {
        let msg = typeof error == 'string' ? error : '获取图书数据失败！';
        ElMessage.error(msg)
    })

}
loadBookContent(bookKey as string)

const windwoResize = () => {
    window.onresize = () => {
        windowHeight.value = window.innerHeight;
        windowWidth.value = window.innerWidth;
        window.location.reload();
    }
}


const handleDocumentLoaded = (e: any) => {    // PDF加载
    pdfPage.isLoading = false
    pdfPage.total = e._pdfInfo.numPages
}

const handleLoadingFailed = () => {
    pdfPage.isLoading = false
    ElMessage({ message: '加载失败!', type: 'error' })
}

const scaleFun = computed(() => {
    let scale = pdfPage.scale;
    return `transform:scale(${scale})`;
})

// 放大
const handleZoomIn = () => {
    if (pdfPage.scale < scaleConstant.maxScale) {
        pdfPage.scale += scaleConstant.scaleStep;
    } else {
        ElMessage({ message: '已经放大最大了', type: 'warning' })
    }
}
// 缩小
const handleZoomOut = () => {
    if (pdfPage.scale > scaleConstant.minScale) {
        pdfPage.scale -= scaleConstant.scaleStep;
    } else {
        ElMessage({ message: '已经缩放到最小了', type: 'warning' })
    }

}
const handlePrePage = () => {
    if (pdfPage.page > 1) {
        pdfPage.page -= 1
    }else{
        ElMessage({ message: '前面没有了~', type: 'warning' })
    }
}

const handleNextPage = () => {
    if (pdfPage.page <= pdfPage.total) {
        pdfPage.page += 1
    }else{
        ElMessage({ message: '这是最后一页了~', type: 'warning' })
    }

}

onMounted(() => {
    windowHeight.value = window.innerHeight;
    windowWidth.value = window.innerWidth;
    windwoResize();
})
</script>

<style scoped lang="scss">
.viewer {
    background-color: #E6E6E6;
}

.reader-setting-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 30px;
    right: 70px;
    font-size: 24px;

    .el-icon:nth-child(2) {
        margin: 0 20px;
    }
}

.previous-chapter-single-container,
.next-chapter-single-container {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.previous-chapter-single-container {
    left: 30px;
}

.next-chapter-single-container {
    right: 30px;
}

.pdf-preview {
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0;
    overflow-x: auto;
    overflow-y: auto;

    .pdf-wrap {
        height: 100%;
    }

    .vue-pdf-embed {
        margin: 0 auto;
        width: 50vw;
        overflow: auto;
        overflow-x: hidden;
        // 转换起点
        transform-origin: top;
        text-align: center;
        border: 1px solid #e5e5e5;
        box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);
    }

    ::v-deep .vue-pdf-embed>div {
        margin-bottom: 18px;
    }

    // ::v-deep .vue-pdf-embed canvas {
    //     width: 98% !important;
    //     border: 1px solid #e7e7e7;
    //     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10);
    // }
}
</style>